<template>
  <div v-loading="loading">
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>亿码互联管理系统</el-breadcrumb-item>
        <el-breadcrumb-item> 申请加盟 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="text-center" style="width: 100%; height: 200px; background-color: rgb(250 210 0 / 30%)">
      <div
        style="
          padding-top: 40px;
          margin: 10px auto;
          font-size: 45px;
          font-weight: bold;
          line-height: 68px;
          color: rgb(189 49 36 / 100%);
        "
      >
        招募代理
      </div>
      <div
        style="
          height: 41px;
          margin: 10px auto;
          font-size: 18px;
          font-weight: bold;
          line-height: 10px;
          color: rgb(51 51 51 / 100%);
          text-align: center;
        "
      >
        全国招募合作伙伴
      </div>
    </div>
    <div class="mt-4">
      <div v-if="agentapplyinfo.agentUserstate === -1">
        <div class="mt-5 p-2 w-40" style="margin: 0 auto">
          <el-radio-group v-model="radiovalue" size="large">
            <el-radio-button label="企业" value="企业" />
            <el-radio-button label="个人" value="个人" />
          </el-radio-group>
        </div>
        <el-radio-group v-model="radiovalue2" size="large" style="font-size: 20px">
          <!-- <view class="m-2 p-4  mx-10">
            <uv-radio name="10000" label="代理费10000元"></uv-radio>
            <text class="pl-6 pt-2">
              分成比例：代理商7成，平台3成
            </text>
          </view>
          <view class="m-2 p-4  mx-10">
            <uv-radio name="0" label="代理费0元"></uv-radio>
            <text class="pl-6 pt-2">
              分成比例：代理商3成，平台7成
            </text>
          </view> -->
          <div class="mt-5 p-4" style="width: 85vw">
            <table border stripe empty-text="暂无更多数据">
              <tr style="height: 60px">
                <th align="center" style="width: 5vw">选择</th>
                <th align="center" style="width: 20vw">
                  <span style="font-size: 28rpx"> 代理等级 </span>
                </th>
                <th align="center" style="width: 30vw">
                  <span style="font-size: 28rpx"> 代理费 </span>
                </th>
                <th align="center" style="width: 30vw">
                  <span style="font-size: 28rpx"> 返利比例 </span>
                </th>
              </tr>
              <tr style="height: 60px">
                <td align="center">
                  <el-radio :value="2000"></el-radio>
                </td>
                <td align="center">
                  <text style="font-size: 30rpx"> 普通代理 </text>
                </td>
                <td align="center">
                  <text style="font-size: 30rpx"> 2000/年 </text>
                </td>
                <td align="center">
                  <text style="font-size: 30rpx"> 20% </text>
                </td>
              </tr>
              <tr style="height: 60px">
                <td align="center">
                  <el-radio :value="10000"></el-radio>
                </td>
                <td align="center">
                  <text style="font-size: 30rpx"> 钻石代理 </text>
                </td>
                <td align="center">
                  <text style="font-size: 30rpx"> 10000/年 </text>
                </td>
                <td align="center">
                  <text style="font-size: 30rpx"> 50% </text>
                </td>
              </tr>
            </table>
            <div class="h-2" style="background-color: #bebebe"></div>
          </div>
        </el-radio-group>
        <div class="p-2">
          <el-form :model="model1" label-width="auto">
            <el-form-item v-if="radiovalue === '个人'" label="姓名" prop="model1.userName" border-bottom>
              <el-input v-model="model1.userName" border="none"> </el-input>
            </el-form-item>
            <el-form-item v-if="radiovalue === '企业'" label="企业名" prop="model1.companyName" border-bottom>
              <el-input v-model="model1.companyName" border="none"> </el-input>
            </el-form-item>
            <el-form-item v-if="radiovalue === '企业'" label="联系人" prop="model1.userName" border-bottom>
              <el-input v-model="model1.userName" border="none"> </el-input>
            </el-form-item>
            <el-form-item label="电话" prop="model1.ownerTel" border-bottom>
              <el-input v-model="model1.ownerTel" border="none"> </el-input>
            </el-form-item>
            <el-form-item label="所在城市" prop="model1.regionName" border-bottom>
              <el-input v-model="model1.regionName" border="none"> </el-input>
            </el-form-item>
            <el-form-item label="代理区域" prop="model1.agentCityname" border-bottom>
              <el-input v-model="model1.agentCityname" border="none"> </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit" style="margin: 0 auto">申请</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div v-else>
        <div v-if="agentapplyinfo.agentUserstate === 2" class="p-4 m-6 border-1 border-gary-500">
          <div class="text-red-500 text-center">（等待审核）</div>
          <div class="pt-2">您好，您的代理商申请，目前在审核阶段</div>
          <div class="pt-2">申请日期：{{ agentapplyinfo.createDate }}</div>
          <div class="pt-2">预计日期：1-3个工作日</div>
        </div>

        <div v-else-if="agentapplyinfo.agentUserstate === 0" class="p-4 m-6 border-1 border-gary-500">
          <div class="text-red-500 text-center">（未通过）</div>
          <div class="pt-2">您好，您的代理商申请未通过</div>
          <div class="pt-2">有问题可在工作日联系186XXXXXXXX</div>
          <div class="pt-2">申请日期：{{ agentapplyinfo.createDate }}</div>
        </div>
        <div v-else-if="agentapplyinfo.agentUserstate === 1" class="p-4 m-6 border-1 border-gary-500">
          <div class="text-green-500 text-center">（已通过）</div>
          <div class="pt-2">您好，您的代理商申请已通过</div>
          <div class="pt-2">登录代理商平台，请在浏览器中访问以下地址</div>
          <div class="pt-2">https://emto.cc:8089/agent</div>
          <div class="pt-2">初始用户名是您的手机号码</div>
          <div class="pt-2">密码：123456</div>
          <div class="text-center mt-10" style="">
            <img v-if="img" :src="img" class="w-50 h-50" style="display: block; margin: 0 auto" />

            <!-- <uv-button
              text="保存"
              custom-style="background-color:#FED440;width:100%;margin-top:200rpx"
              open-type="share"
            >
              分享
            </uv-button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { companyinfo_one, agentapply_saveone, agent_shareqrcode } from '@/api/index.js';
import { ElMessage, ElMessageBox } from 'element-plus';

const showToast = inject('showToast');
const loading = ref(true);
loading.value = false;
let userinfo = ref({});
let vipinfo = ref({});
const model1 = ref({
  companyName: '',
  userName: '',
  ownerTel: '',
  regionName: '',
  agentCityname: '',
});
const router = useRouter();
const img = ref('');
//localStorage.setItem('userinfo', '{"createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"remark":null,"id":1,"uWxOpenid":"oMeua61EGEYZcJebCHPWpaWFaYNI","uPhone":"18624024313","uNikename":"羽然香","ueId":null,"uAvatar":"https://ecodeuserstore.oss-cn-beijing.aliyuncs.com/UserAvatar/YfidCMsBwn.jpeg","uShareratio":null,"createdTime":"2024-04-19 05:17:00","updatedTime":null,"uState":0,"pDistribuUserid":null,"uLevel":null,"isDistritution":null,"uVipLevel":null,"limitImgtxtone":6291456,"limitImgtxtsum":100,"limitAudiovideoone":62914560,"limitAudiovideosum":100,"vipName":"vip1","user_companyName":null}')
userinfo.value = JSON.parse(localStorage.getItem('userinfo'));
vipinfo.value = JSON.parse(localStorage.getItem('vipinfo'));
const radiovalue = ref('企业');
const radiovalue2 = ref(10000);
const agentapplyinfo = ref({ agentUserstate: -1 });
function submit() {
  if (model1.value.companyName === '' && radiovalue.value === '企业') {
    ElMessage({
      message: '请输入企业名称',
      type: 'info',
    });
  } else if (model1.value.userName === '') {
    ElMessage({
      message: '请输入用户名或联系人',
      type: 'info',
    });
  } else if (model1.value.ownerTel === '') {
    ElMessage({
      message: '请输入联系人电话',
      type: 'info',
    });
  } else if (model1.value.regionName === '') {
    ElMessage({
      message: '请输入所在城市',
      type: 'info',
    });
  } else if (model1.value.agentCityname === '') {
    ElMessage({
      message: '请输入代理城市',
      type: 'info',
    });
  } else {
    model1.value.userType = radiovalue.value === '企业' ? 1 : 0;
    model1.value.agentRatiotype = radiovalue2.value === '10000' ? 1 : 0;
    agentapply_saveone(model1.value).then((res) => {
      agentapplyinfo.value = res.data.data.agentapplyinfo;

      ElMessage({
        message: '申请成功',
        type: 'success',
      });
    });
  }
}
const arrayBufferToBase64Img = (buffer) => {
  const str = String.fromCharCode(...new Uint8Array(buffer));
  return `data:image/jpeg;base64,${btoa(str)}`;
};

onMounted(() => {
  companyinfo_one({ userId: userinfo.value.id }).then((res) => {
    if (res.data.data.agentapplyinfo !== null) {
      agentapplyinfo.value = res.data.data.agentapplyinfo;
      console.log('agentapplyinfo:', agentapplyinfo.value);

      if (agentapplyinfo.value.agentUserstate === 1) {
        console.log('111:');
        agent_shareqrcode().then((ress) => {
          console.log(ress);
          img.value = 'data:image/jpeg;base64,' + ress.data.data.base64_qrcode;
          console.log('img.value:', img.value);
          // this.img2 = ress.data.base64_qrcode;
        });
      }

      //console.log('this.agentapplyinfo', this.agentapplyinfo);
    }
  });
});
</script>
<style scoped lang="less">
th {
  background-color: #333333;
  color: #fff !important;
}
</style>

